<template>
  <div class="header-section">
    <div class="logo-area">
      <img src="@/assets/svg/wic.svg" alt="Logo" />
    </div>

    <div class="title-area">
      <h1 ref="titleRef">Energy Management System Data View </h1>
    </div>

    <div class="status-area">
      <div class="status-content">
        <!-- <div class="datetime"> -->
        <!-- <span> {{ currentDate }} &nbsp;{{ currentTime }}</span> -->
        <!-- <div class="time"> </div> -->
        <!-- </div> -->

        <!-- 看板大屏顶部右上角信息 -->
        <div class="user-info">
          <!-- 网络图标和设备连接状态图标 -->
          <div class="network">
            <!--             
              动态绑定class：
              - serverConnected为true时，添加online类（绿色）
              - serverConnected为false时，添加offline类（灰色）
            -->
            <el-icon title="网络连接状态" :class="{ 'online': serverConnected, 'offline': !serverConnected }">
              <Platform />
            </el-icon>
            <!-- <Icon icon="carbon:server" /> 服务器图标 -->
          </div>
          <!-- <el-dropdown trigger="hover">
            <div class="userinfo">
              <img class="avatar" src="@/assets/svg/gif.gif" />
              <span>{{ userinfo?.name || 'admin' }}</span>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>个人中心</el-dropdown-item>
                <el-dropdown-item>修改密码</el-dropdown-item>
                <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
</el-dropdown> -->
        </div>



      </div>
      <div class="version"> <span> {{ currentDate }} &nbsp; {{ currentTime }} &nbsp; Version: V1.0.0</span> </div>
    </div>
  </div>
</template>

<script setup>
// 导入所需的 Vue 组件和工具
import { ref, onMounted, onUnmounted } from 'vue'
// import { 
//   Connection,      // 网络连接
//   Platform,        // 平台/服务器
//   Service,         // 服务
//   Monitor,         // 监控
//   DataBoard,       // 数据面板
//   Loading,         // 加载中
//   DCaret,          // 数据传输
//   Operation,       // 运维操作
//   SetUp,           // 设置/配置
//   Switch           // 开关状态
// } from '@element-plus/icons-vue'
// import { Icon } from '@iconify/vue'
// import { Icon } from '@iconify/vue'
import { checkServerHeartbeat } from '@/api/dashboard'
import { useAccount } from '@/pinia/modules/account'
// import { data } from 'autoprefixer';
// import { ServerOutlined } from '@ant-design/icons-vue'


// 初始化系统状态管理
const account = useAccount()
// 标题元素的引用
const titleRef = ref(null)

// 服务器连接状态，默认为连接状态（true）
const serverConnected = ref(true)

// 计算系统状态，用于显示网络连接状态
// const systemStatus = computed(() => {
//   return {
//     isConnected: serverConnected.value,
//     status: serverConnected.value ? 'online' : 'offline'
//   }
// })

// 时间日期显示
const currentDate = ref('') // 当前日期
const currentTime = ref('') // 当前时间

// 更新日期和时间的函数
const updateDateTime = () => {
  const now = new Date()
  const weekdays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
  const weekday = weekdays[now.getDay()]
  // 格式化日期：YYYY-MM-DD Weekday
  currentDate.value = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}  ` + " \u00A0" + ` ${weekday}`
  // 格式化时间：HH:mm:ss
  currentTime.value = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`
}

// 检查网络连接状态
const checkConnection = async () => {
  // 如果未登录，不进行心跳检测，直接设置为离线状态
  if (!account.userinfo) {
    serverConnected.value = false
    return
  }

  try {
    // 发送心跳请求并获取响应
    const hartState = await checkServerHeartbeat()
    // console.log('心跳请求:', hartState);

    // 根据心跳响应设置连接状态
    // hartState.code === 200 返回布尔值：
    // - 如果状态码是200，返回true，显示绿色图标
    // - 如果状态码不是200，返回false，显示灰色图标
    serverConnected.value = hartState.code === 200 ///返回200就会为true
  } catch (error) {
    // 如果请求出错，记录错误并设置为离线状态
    console.error('心跳检测错误:', error);
    serverConnected.value = false
  }
}

// 定时器变量，分别用于更新时间和心跳检测
let timer, timer1

// 组件挂载时的初始化
onMounted(() => {
  // 初始更新时间
  updateDateTime()
  // 初始检查连接状态
  checkConnection()

  // 设置定时器，每秒更新日期时间
  timer = setInterval(() => {
    updateDateTime()
  }, 1000)

  // 设置定时器，每10秒检查一次心跳连接状态
  timer1 = setInterval(() => {
    checkConnection()
  }, 10000) // 10秒检查一次
})

// 组件卸载时清理
onUnmounted(() => {
  // 清除所有定时器，避免内存泄漏
  if (timer) {
    clearInterval(timer)
    timer = null
  }
  if (timer1) {
    clearInterval(timer1)
    timer1 = null
  }
})

// 随机延迟时间（5~45+5秒）
const getRandomDelay = () => Math.floor(Math.random() * (50000 - 5000) + 5000)

// 添加动画类
const addAnimation = () => {
  if (titleRef.value) {
    titleRef.value.classList.add('title-animate')
    // 动画结束后移除类
    setTimeout(() => {
      titleRef.value.classList.remove('title-animate')
      // 设置下一次动画
      setTimeout(addAnimation, getRandomDelay())
    }, 3000) // 3秒是动画持续时间（缩小1秒+旋转1秒+放大1秒）
  }
}

onMounted(() => {
  // 初始启动动画，带随机延迟
  setTimeout(addAnimation, getRandomDelay())
})
</script>

<style lang="scss" scoped>
@import 'styles/HeaderSection.scss';
</style>
